<apes-header></apes-header>
<apes-content>
  <div apes-row style="padding: 16px;">
  <div apes-col apesXs="24" apesMd="24" *ngFor="let i of progress">
    <apes-card [apesTitle]="one">
      <ng-template #one>
        <h3>{{ i.title }}</h3>
        <p style="margin: 0;padding: 0;">
          {{ i.total }}
          <span style="font-size: 26px; margin-left: 10px;">{{ actualAmount }}</span>
          <span style="margin-left: 10px;">万</span>
        </p>
      </ng-template>

      <div style="margin-bottom: 10px;" *ngIf="targetAmount != 'NaN' ">
        <mini-progress height="80" [percent]="actualAmount / 20" [strokeWidth]="8"
                       [target]="targetAmount / 20"></mini-progress>
      </div>
      <div class="d-flex justify-content-between" style="font-size: 16px;" *ngIf="targetAmount != 'NaN' ">
        <p style="margin: 0;padding: 0;">
          {{ i.rateLeft }}
          <span style="font-weight: bold; color: #f5222d; font-size: 18px;">{{ targetAmount }}</span>
          <span>万</span>
        </p>
        <p style="margin: 0;padding: 0;">
          {{ i.rateRight }}
          <span style="font-weight: bold; color: #f5222d; font-size: 18px;">{{ (targetAmount - actualAmount).toFixed(2) }}</span>
          <span>万</span>
        </p>
      </div>

    </apes-card>
  </div>

  <div apes-col apesXs="24" apesMd="12">
    <apes-card [apesBordered]="true" [apesTitle]="topSalesTitle">
      <ng-template #topSalesTitle>
        销售报表
        <small class="text-sm font-weight-normal">门店销售前十</small>
      </ng-template>
      <apes-bar height="300" [data]="topSalesData" [padding]="[ 10, 35, 30, 105 ]" [transpose]="true"></apes-bar>
    </apes-card>
  </div>
  <div apes-col apesXs="24" apesMd="12">
    <apes-card [apesTitle]="lastSalesTitle" [apesBordered]="true">
      <ng-template #lastSalesTitle>
        销售报表
        <small class="text-sm font-weight-normal">门店销售后十</small>
      </ng-template>
      <apes-bar height="300" [data]="lastSalesData" [padding]="[ 10, 35, 30, 105 ]" [transpose]="true"></apes-bar>
    </apes-card>
  </div>
  </div>
</apes-content>
